<div class="deploy-image">
  <select-project ng-if="!project" selected-project="input.selectedProject" name-taken="projectNameTaken"></select-project>
  <span ng-show="!noProjectsCantCreate">
    <p>
      Deploy an existing image from an image stream tag or docker pull spec.
    </p>
    <ng-form name="forms.imageSelection">
      <fieldset ng-disabled="loading">
        <div class="radio">
          <label>
            <input type="radio" ng-model="mode" value="istag">
            Image Stream Tag
          </label>
        </div>
        <fieldset>
          <istag-select model="istag" select-required="mode === 'istag'" select-disabled="mode !== 'istag'" include-shared-namespace="true" append-to-body="isDialog"></istag-select>
          <div ng-if="mode == 'istag' && istag.namespace && istag.namespace !== 'openshift' && istag.namespace !== input.selectedProject.metadata.name" class="alert alert-warning">
            <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
            Service account <strong>default</strong> will need image pull authority to deploy images
            from <strong>{{istag.namespace}}</strong>. You can grant authority with the command:

            <p>
              <code>oc policy add-role-to-user system:image-puller system:serviceaccount:{{input.selectedProject.metadata.name}}:default -n {{istag.namespace}}</code>
            </p>
          </div>
        </fieldset>
        <!-- disable this radio option when creating a project as image search requires a namespace -->
        <div class="radio" ng-class="{disabled : !input.selectedProject.metadata.uid}">
          <label>
            <input type="radio" ng-model="mode" value="dockerImage" ng-disabled="!input.selectedProject.metadata.uid">
            Image Name
          </label>
        </div>
        <fieldset ng-disabled="!input.selectedProject.metadata.uid">
          <div class="form-group">
            <label for="imageName" class="sr-only">Image name or pull spec</label>
            <div class="input-group">
              <input type="search"
                     id="imageName"
                     name="imageName"
                     ng-model="imageName"
                     ng-required="mode === 'dockerImage'"
                     select-on-focus
                     ng-disabled="mode !== 'dockerImage'"
                     placeholder="Image name or pull spec"
                     class="form-control"
                     autocorrect="off"
                     autocapitalize="none"
                     spellcheck="false">
              <span class="input-group-btn">
                <button class="btn btn-default"
                        type="submit"
                        ng-disabled="!imageName"
                        ng-click="findImage()">
                  <i class="fa fa-search" aria-hidden="true"></i>
                  <span class="sr-only">Find</span>
                </button>
              </span>
            </div>
            <div ng-if="!input.selectedProject.metadata.uid" class="help-block">
              Image search is only available for existing projects.
            </div>
          </div>
        </fieldset>
      </fieldset>
    </ng-form>
    <div class="mar-top-lg mar-bottom-lg">
      <div class="separator"></div>
    </div>
    <div ng-if="loading || !import" class="empty-state-message text-center">
      <h2 ng-if="!loading" class="h2">Select an image stream tag or enter an image name.</h2>
      <h2 ng-if="loading" class="h2">Loading image metadata for <span class="word-break">{{imageName | stripSHA}}</span>...</h2>
    </div>
    <div class="row mar-bottom-md" ng-if-start="!loading && import.image">
      <div class="col-sm-2 hidden-xs text-right h2">
        <span class="fa fa-cube text-muted" style="font-size: 100px;" aria-hidden="true"></span>
      </div>
      <div class="col-sm-10">
        <div ng-if="runsAsRoot" class="alert alert-warning">
          <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
          Image <strong>{{import.name}}</strong> runs as the
          <strong>root</strong> user which might not be permitted by your cluster
          administrator.
        </div>
        <h2>
          <span ng-if="mode === 'dockerImage'">{{import.name}}</span>
          <span ng-if="mode === 'istag'">{{istag.imageStream}}<span ng-if="import.tag">:{{import.tag}}</span></span>
          <small>
            <span ng-if="import.result.ref.registry">from {{import.result.ref.registry}},</span>
            <span am-time-ago="import.image.dockerImageMetadata.Created"></span>,
            <span ng-if="import.image.dockerImageMetadata.Size">{{import.image.dockerImageMetadata.Size | humanizeSize}},</span>
            {{import.image.dockerImageLayers.length}} layers
          </small>
        </h2>
        <ul>
          <li ng-if="!import.namespace">Image Stream <strong>{{app.name || "&lt;name&gt;"}}:{{import.tag || 'latest'}}</strong> will track this image.</li>
          <li>This image will be deployed in Deployment Config <strong>{{app.name || "&lt;name&gt;"}}</strong>.</li>
          <li ng-if="ports.length">
            <span ng-if="ports.length === 1">Port</span>
            <span ng-if="ports.length > 1">Ports</span>
            <span ng-repeat="port in ports">
              <span ng-if="!$first && $last">and</span>
              {{port.containerPort}}/{{port.protocol}}<span ng-if="!$last && ports.length > 2">,</span>
            </span>
            will be load balanced by Service <strong>{{app.name || "&lt;name&gt;"}}</strong>.
            <div>Other containers can access this service through the hostname <strong>{{app.name || "&lt;name&gt;"}}</strong>.</div>
          </li>
        </ul>
        <div ng-if="(volumes | hashSize) > 0" class="help-block">
          This image declares volumes and will default to use non-persistent, host-local storage.
          You can add persistent storage later to the deployment config.
        </div>
      </div>
    </div>

    <div ng-if-end>
      <ng-form name="forms.deployImage" class="osc-form">
        <div class="form-group">
         <label for="name" class="required">Name</label>
         <div ng-class="{'has-error': (forms.deployImage.name.$invalid && forms.deployImage.name.$touched) || nameTaken}">
           <input type="text"
                  required
                  select-on-focus
                  minlength="2"
                  maxlength="24"
                  pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                  ng-model="app.name"
                  id="name"
                  name="name"
                  class="form-control"
                  autocorrect="off"
                  autocapitalize="none"
                  spellcheck="false">
          </div>
          <div class="help-block">Identifies the resources created for this image.</div>
          <div class="has-error" ng-show="forms.deployImage.name.$invalid && forms.deployImage.name.$touched">
            <div class="help-block" ng-show="forms.deployImage.name.$error.required">
              A name is required.
            </div>
            <div class="help-block" ng-show="forms.deployImage.name.$error.pattern">
              Name must be an alphanumeric (a-z, 0-9) string with a maximum length
              of 24 characters where the first character is a letter (a-z). The '-'
              character is allowed anywhere except the first or last character.
            </div>
            <div class="help-block" ng-show="forms.deployImage.name.$error.minlength">
              Name must have at least 2 characters.
            </div>
            <div class="help-block" ng-show="forms.deployImage.name.$error.maxlength">
              Name can't have more than 24 characters.
            </div>
          </div>
          <div class="has-error" ng-show="nameTaken">
            <span class="help-block">This name is already in use within the project. Please choose a different name.</span>
          </div>
        </div>
        <osc-form-section
            header="Environment Variables"
            about-title="Environment Variables"
            about="Environment variables are used to configure and pass information to running containers."
            expand="true"
            can-toggle="false"
            class="first-section">
          <key-value-editor
            entries="env"
            key-placeholder="Name"
            key-validator="[A-Za-z_][A-Za-z0-9_]*"
            key-validator-error="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
            value-placeholder="Value"
            value-from-selector-options="input.selectedProject.metadata.uid && valueFromNamespace[input.selectedProject.metadata.name]"
            add-row-link="Add Value"
            add-row-with-selectors-link="Add Value from Config Map or Secret"></key-value-editor>
        </osc-form-section>

        <label-editor
            labels="labels"
            expand="true"
            can-toggle="false"
            help-text="Each label is applied to each created resource.">
        </label-editor>

        <alerts alerts="alerts"></alerts>
        <div ng-if="!isDialog" class="button-group gutter-bottom" ng-class="{'gutter-top': !alerts.length}">
          <button type="submit"
              class="btn btn-primary btn-lg"
              ng-click="create()"
              value=""
              ng-disabled="forms.deployImage.$invalid || nameTaken || disableInputs">Create</button>
          <a class="btn btn-default btn-lg" href="#" back>Cancel</a>
        </div>
      </ng-form>
    </div>

    <div ng-if="!loading && import.error" class="empty-state-message text-center">
      <h2>
        <i class="pficon pficon-error-circle-o" aria-hidden="true"></i>
        Could not load image metadata.
      </h2>
      <p>{{import.error | upperFirst}}</p>
    </div>

    <div ng-if="!loading && import && !import.error && !import.image" class="empty-state-message text-center">
      <h2>
        No image metadata found.
      </h2>
      <p>Could not find any images for {{import.name | stripTag}}:{{import.tag}}.</p>
    </div>
  </span>
</div>
